<template>
  <div class="car-table">
    <el-input placeholder="请输入车牌号" v-model="searchText" class="search-box" :class="{dialogSence: tableScene===2}">
      <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
    </el-input>
    <!-- :header-row-style="setHeaderClass" 修改头部样式 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      :height="tableHeight"
      border
      v-loading="loading"
      element-loading-text="数据加载中..."
      highlight-current-row
      @cell-click="onCellClick"
      :empty-text="emptyText"
      @selection-change="onSelectionChange"
      style="width: 100%">


      <el-table-column
        prop="vecNo"
        label="车牌号"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <span>{{ getVecS(scope.row.vecNo, scope.row.lockCode) }}</span>
        </template>
      </el-table-column>
      <!--<el-table-column-->
      <!--prop="gpsTime"-->
      <!--label="状态"-->
      <!--width="80"-->
      <!--align="center"-->
      <!--header-align="center">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ getStatus(scope.row.gpsTime) }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column
        prop="lockStatus"
        label="锁状态"
        width="80"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <span>{{ getShortS(scope.row.gpsTime, scope.row.lockStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showSelection"
        prop="opt"
        label="操作"
        width="80"
        align="center"
        header-align="center">
        <template slot-scope="scope" v-if="new Date().getTime()-new Date(scope.row.gpsTime).getTime()<360000">
          <el-button type="text" size="small"
                     v-if="scope.row.lockStatus.indexOf('施封')>=0||scope.row.lockStatus.indexOf('锁定')>=0||scope.row.lockStatus.indexOf('待命态')>=0"
                     @click="openLockSubmit(scope.row.lockCode)">解封
          </el-button>
          <el-button type="text" size="small"
                     v-if="scope.row.lockStatus.indexOf('解封')>=0||scope.row.lockStatus.indexOf('开启')||scope.row.lockStatus.indexOf('待命态')>=0"
                     @click="lockSubmit(scope.row.lockCode)">施封
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="limit"
      :current-page="currentPage"
      :total="total"
      small
      layout="total, prev, next, jumper"
      @current-change="onCurrentChange">
    </el-pagination>


  </div>


</template>

<script>
  import {getCarList, queryDeviceByVecNo, openLock, lock} from '@/api/mapMonit'

  export default {
    name: 'car-table',
    // props定义的数据无法在computed访问返回undefined，可以在mounted时期通过this访问
    props: {
      showSelection: { // 表格是否增加单选框
        type: Boolean,
        default: false
      },
      tableScene: { // 1表示地图场景，2表示窗口打开场景
        type: Number,
        default: 1
      },
      fenceId: Number
    },
    data() {
      return {
        tableData: [],
        currentPage: 1, // 当前页索引
        limit: 10, // 每页大小 固定
        total: 0, // 总数
        searchText: '',
        emptyText: ' ',
        loading: false,
        tableHeight: null
      }
    },
    mounted() {
      setTimeout(() => {
        this._getCarList()
        this.setTableHeight(this.tableScene)
      }, 20)
    },
    // computed:{
    //   tableHeight: ()=>{
    //     let tableHeight = 0
    //     console.log(this.tableScene)
    //     if(this.tableScene === 1){
    //       tableHeight = window.innerHeight - (60+20+40+34+32)
    //     }else if(this.tableScene === 2){
    //       tableHeight = 500
    //     }
    //     return tableHeight
    //   }
    // },
    methods: {
      setTableHeight(sence) { // sence：1表示地图场景，2表示窗口打开场景
        if (sence === 1) {
          this.tableHeight = document.body.scrollHeight - (85 + 20 + 34 + 32 - 4)
          this.limit = 15
        } else if (sence === 2) {
          this.tableHeight = null
          this.limit = 10
        }
      },

      lockSubmit(lockCode) {
        this.$confirm(`确定对[锁=${lockCode}]进行施封操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText:
            '取消',
          type:
            'warning'
        }).then(() => {
          lock(lockCode).then(res => {
            this.visible = true
            if (res.code == 0) {
              this.$message({
                message: '施封成功！',
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        });
      },
      openLockSubmit(lockCode) {
        this.$confirm(`确定对[锁=${lockCode}]进行开锁操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText:
            '取消',
          type:
            'warning'
        }).then(() => {
          openLock(lockCode).then(res => {
            this.visible = true
            if (res.code == 0) {
              this.$message({
                message: '开锁成功！',
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        });
      },

      _getCarList() {
        this.loading = true
        this.tableData = []
        let rules = []
        rules.push({"field": "vec_no", "op": "cn", "data": this.searchText.trim()});
        var filters = {"groupOp": "AND", "rules": rules};
        var params = {
          filters: filters, // 围栏号
          page: this.currentPage, // 当前页索引
          limit: this.limit // 每页大小
        };
        getCarList(params).then(res => {
          let page = res.page
          if (res.code == 0) {
            this.tableData = [...page.list]
            this.currentPage = page.currPage
            this.limit = page.pageSize
            this.total = page.totalCount
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
          this.loading = false
          this.emptyText = this.tableData.length ? ' ' : '暂无数据'
        })
      },

      getVecS(vecNo, lockCode) {
        return vecNo + "(" + lockCode + ")";
      },
      getShortS(gpsTime, lockStatus) {
        var status = '在线';
        if (new Date().getTime() - new Date(gpsTime).getTime() > 360000) {
          status = '离线'
        } else {
          status = '在线'
        }
        if (lockStatus.indexOf('施封') >= 0 || lockStatus.indexOf('锁定') >= 0) {
          return '施封' + "(" + status + ")";
        }
        else if (lockStatus.indexOf('解封') >= 0 || lockStatus.indexOf('开启') >= 0) {
          return '解封' + "(" + status + ")";
        } else {
          return lockStatus + "(" + status + ")";
        }

      },
      getStatus(gpsTime) {
        if (new Date().getTime() - new Date(gpsTime).getTime() > 360000) {
          return '离线'
        } else {
          return '在线'
        }
      },
      // 表格单元格选中事件
      onCellClick(row, column, cell, event) {
        this.$emit("onCarTableCellClick", row, column, cell, event)
      },
      // 表格单选框选中事件
      onSelectionChange(val) {
        this.$emit("onCarTableSelection", val)
      },
      onSearch() {
        if (this.currentPage === 1) {
          this._getCarList()
        } else {
          this.currentPage = 1 // 通过改变页数来触发事件加载数据
        }
      },
      onCurrentChange(page) {
        this.currentPage = page
        this._getCarList()
      },
      // 设置表格头部样式
      // setHeaderClass({row, rowIndex}){
      //   return {'color':'red','font-size':'14px','background':'red'}
      // }
    }
  }
</script>

<style scoped lang="less">
  .car-table {
    height: 100%;
    .search-box {
      // padding: 1px 0;
    }
    .dialogSence {
      width: 40%;
      padding-bottom: 5px;
    }
    .el-table {
      .oncar {
        color: #2578f9;
      }
      .offcar {
        color: #fd3737;
      }
      .car-status-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        left: 20px;
      }
      .car-status-icon1 {
        background: url('../common/images/status/run.png') no-repeat;
      }
      .car-status-icon2 {
        background: url('../common/images/status/stop.png') no-repeat;
      }
      .car-status-icon3 {
        background: url('../common/images/status/online.png') no-repeat;
      }
      .car-status-icon4 {
        background: url('../common/images/status/offline.png') no-repeat;
      }
      .car-status-icon5 {
        background: url('../common/images/status/alarm.png') no-repeat;
      }
      .car-status-icon6 {
        background: url('../common/images/status/unuse.png') no-repeat;
      }
    }
    .el-pagination {
      text-align: right;
    }
  }
</style>
